import { TaskType } from "@/lib/types";
import { Button } from "../ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "../ui/dropdown-menu";
import { modelMenuData, taskTypeColors } from "@/lib/const";

export default function ModelMenu({
  onClick,
}: {
  onClick?: (task: TaskType, model: string) => void;
}) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">新增节点</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        {modelMenuData.map((menuItem, index) => (
          <div key={menuItem.task}>
            <DropdownMenuLabel>{menuItem.label}</DropdownMenuLabel>
            <DropdownMenuGroup className="flex flex-wrap gap-1 w-96 max-h-24 overflow-y-auto">
              {menuItem.models.map((model) => (
                <DropdownMenuItem
                  key={model}
                  className={`${taskTypeColors[menuItem.task]} cursor-pointer`}
                  onClick={() => onClick?.(menuItem.task, model)}
                >
                  {model}
                </DropdownMenuItem>
              ))}
            </DropdownMenuGroup>
            {index < modelMenuData.length - 1 && (
              <DropdownMenuSeparator className="bg-accent" />
            )}
          </div>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
